<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


        /*除了使用绝对单位，也可以使用百分比。

            .container { display: grid; grid-template-columns: 33.33% 33.33% 33.33%;
             grid-template-rows: 33.33% 33.33% 33.33%;

                  有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。上面的代码用repeat()改写如下。
             .container { display: grid; grid-template-columns: repeat(3, 33.33%); grid-template-rows: repeat(3, 33.33%);

             grid-template-columns: repeat(2, 100px 20px 80px);   1 4列同宽

         }
         */
        .container {
            display: grid;

            grid-template-columns:200px 200px 200px; /*指定每列的宽*/
         /*   grid-template-columns:  repeat(auto-fill, 200px)  ;   自动填充  */
            grid-template-rows: 200px 200px 200px;    /*指定每行的高*/


        }



        .container :nth-child(1) {
            background-color: rgb(120, 85, 85);    /* 第一个孩子*/
          
        }

        .container :nth-child(2) {
            background-color: rgb(119, 18, 18);
        }

        .container :nth-child(3) {
            background-color: rgb(34, 65, 150);
        }

        .container :nth-child(4) {
            background-color: rgb(190, 31, 124);
        }

        .container :nth-child(5) {
            background-color: rgb(28, 164, 228);
        }

        .container :nth-child(6) {
            background-color: rgb(10, 131, 131);
        }

        .container :nth-child(7) {
            background-color: rgb(255, 0, 212);
        }

        .container :nth-child(8) {
            background-color: rgb(22, 1, 1);
        }

        .container :nth-child(9) {
            background-color: rgb(51, 255, 0);
        }
    </style>
</head>



<body>
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

</body>
</html>